import React, {Component} from 'react'
import ReactDOM from 'react-dom'

// 多层组件互相传值

// Context的基本使用
// 创建Context得到两个主组件,生产者和消费者,能够直接将数据进行传递过来
const { Provider, Consumer } = React.createContext()

class App extends Component{
    render() {
        return (
            // 发送数据
            <Provider value='pink'>
                <div className='app'>
                    <Node />
                </div>
            </Provider>
        )
    }
}

const Node = props => {
    return (
        <div className='node'>
            <SubNode />
        </div>
    )
}

const SubNode = props => {
    return (
        <div className='subnode'>
            <Child />
        </div>
    )
}

const Child = props => {
    return (
        <div className='Child'>
            <Consumer>
                {
                    // 接收数据
                    data => <span>我是子节点--{data}</span>
                }
            </Consumer>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))